@import "public";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 12px;
}
// 快速样式col-#{$i}
@for $i from 1 to 7 {
    .col-#{$i}{
        width: $i / 12 * 100%;
    }
    
}
//垂直弹性布局
@mixin vertical {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
//水平弹性布局=
@mixin align {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
//实现标题文字被鼠标悬浮时右侧精灵图变化
@mixin icon{
    @include liebiao();
    &:hover{
    @include liebiao2();
    }
}
@mixin liebiao {
    &::after{
        content: "";
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-left: 10px;
        background-image: url(../img/列表icon.png);
        background-position: 16px 0;
    }
}
@mixin liebiao2 {
    cursor: pointer;
    &::after{
        content: "";
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-left: 10px;
        background-image: url(../img/列表icon.png);
        background-position: 0 0;
    }
}
a{
    text-decoration: none;
    color: #000;
}
ul{
    list-style-type: none;
}
div{
    // border: solid 1px;
}
html{
    scroll-behavior: smooth;//!!!新知识点，锚点定位跳转实现平滑跳转
}
.nav,.search{
    width: 100%;
    min-width: 1190px;
}
.container,.outline{
    width: 1190px;
    height: 30px;
    min-width: 1190px;
}
body{
    background-color: #e3e4e9;
    // overflow-x: hidden;
}
//导航栏索引 //位置，下拉icon还未添加
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e3e4e5;
    .content{
        display: flex;
        // height: 14px;
        width: 1190px;
        .location{
            flex: auto;
            justify-content: flex-start;
            display: flex;
            span{
                margin: 10px 0;
                padding: 5px 10px;
                color: #999;
            }
        }
        div+div{
            margin: 10px 0;
            padding: 5px 10px;
            border-right: #ccc solid 1px;
            color: #999;
        }
        div:last-child{
            border-right: none;
        }
        .enroll{
            span{
                color: red;
                margin-left: 10px;
            }
        }
        .buy{
            color: red;
        }
    }
}
//搜索框logo部分采用grid布局
.search{
    display: grid;
    width: 100%;
    margin: 0 auto;
    grid-template-areas: 
                "a b"
                "a c";
    grid-template-columns: 190px 1000px;
    grid-template-rows: 100px 40px;
    justify-content: center;
    background-color: #fff;
    //logo部分
    .log{
        grid-area: a;
        overflow: hidden;
        img{
            width: 190px;
            height: 190px;
        }
    }
    // 搜索引擎部分grid布局
    .search-container{
        grid-area: b;
        display: grid;
        grid-template-areas:
                        "t h"
                        "e e";
        grid-template-columns: 600px 200px;
        grid-template-rows: 70px 30px;
        align-items: flex-end;
        justify-content: center;
        //搜索框组件
        .form{
            grid-area: t;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 550px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            margin-left: 30px;
            border: 4px solid red;
            div:first-child{
                flex: auto;
                display: flex;
                input{
                    flex: auto;
                    line-height: 24px;
                    outline: none;
                    border: none;
                }
            }
            .cemra{
                line-height: 24px;
                flex-basis: 48px;
            }
            .zoom{
                flex-basis: 58px;
                background-color: red;
                color: #fff;
            }
        }
        //购物车组件
        .basket{
            grid-area: h;
            display: flex;
            width: 132px;
            height: 36px;
            justify-content: center;
            align-items: center;
            border: solid 1px red;
            color: red;
        }
        // 搜索框下方文字
        .descript{
            grid-area: e;
            margin-left: 30px;
            align-self: center;
            .checkd{
                color: red;
            }
            span{
                flex: auto;
                margin-right: 10px;
            }
        }
    }
    //section中的文字部分
    .section{
        grid-area: c;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        span{
            display: block;
            font-size: 15px;
        }
        .checked{
            color: red;
        }

        
    }
}
//大纲
.outline{
    width: 1190px;
    height: 491px;
    margin: 0 auto;
    margin-top: 10px;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 190px 1fr 190px;
    gap: 5px;
    //左侧导航栏部分
    .outline-nav{
        background-color: #fff;
        font-size: 0px;
        display: flex;
        flex-direction: column;
        padding:10px 0;
        ul{
            flex: auto;
            margin: 0 10px;
            li{
                +li::before{
                    content: "/";
                }
                display: inline-block;
                font-size: 14px;
            }
        }
    }
    //carousel轮播图部分
    .carousel{
        overflow: hidden;
        //主轮播图
        .carousel-left{
            float: left;
            overflow: hidden;
            width: 590px;
            height: 489px;
            position: relative;
            .picture-left{
                display: flex;
                object-fit: cover;
                width: 500%;
                transition: all 2s linear;
                img{
                    width: 590px;
                    height: 489px;
                }
            }
            //主轮播图按钮
            input{
                position: absolute;
                bottom: 10px;
                // left: 10px;
            }
            @for $a from 1 to 6 {
                #r#{$a}{
                    margin-left: 20px * $a;
                   &:checked ~ .picture-left{
                        margin-left: 100% - $a * 100%;
                    }
                }
            }
            //主轮播图控制器
            .control{
                // 上一张
                .prev{
                    position: absolute;
                    width: 25px;
                    height: 35px;
                    border-radius: 0 17.5px 17.5px 0;
                    background-color: #ffffffcc;
                    opacity: .5;
                    top: 50%;
                    transform: translateY(-50%);
                    .l-arrow{
                        border: 10px solid transparent;
                        border-right: 10px solid #333;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: -5px;
                    }
                }
                // 上一张
                .next{
                    position: absolute;
                    width: 25px;
                    height: 35px;
                    border-radius: 17.5px 0 0 17.5px;
                    background-color: #ffffffcc;
                    opacity: .5;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    .r-arrow{
                        border: 10px solid transparent;
                        border-left: 10px solid #333;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: -5px;
                    }
                }
            }
        }
        //小轮播图
        .right{
            float: right;
            height: 489px;
            position: relative;
            .picture-right{
                width: 190px;
                height: 489px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                div{
                    width: 190px;
                    img{
                        width: 190px;
                        height: 150px;
                    }
                }
            }
            //小轮播图控制器
            .control{
                // 上一张
                .prev{
                    position: absolute;
                    width: 25px;
                    height: 35px;
                    border-radius: 0 17.5px 17.5px 0;
                    background-color: #ffffffcc;
                    opacity: .5;
                    top: 50%;
                    transform: translateY(-50%);
                    .l-arrow{
                        border: 10px solid transparent;
                        border-right: 10px solid #333;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: -5px;
                    }
                }
                // 上一张
                .next{
                    position: absolute;
                    width: 25px;
                    height: 35px;
                    border-radius: 17.5px 0 0 17.5px;
                    background-color: #ffffffcc;
                    opacity: .5;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    .r-arrow{
                        border: 10px solid transparent;
                        border-left: 10px solid #333;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: -5px;
                    }
                }
            }
        }
    }
    //用户登陆注册部分
    .login{
        background-color: #fff;
        display: flex;
        flex-direction: column;
        padding: 10px;
        // top用户区
        .user{
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid;
            .portrait{
                float: left;
                height: 40px;
                width: 40px;
                border-radius: 20px;
            }
            .access{
                float: right;
                height: 40px;
                width: 120px;
                p{
                    line-height: 20px;
                    text-align: center;
                }
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
            }
            .vip{
                display: flex;
                height: 40px;
                width: 100%;
                div{
                    flex: auto;
                    border-radius: 20px;
                    line-height: 35px;
                    text-align: center;
                }
                .new-user{
                    background-color: red;
                    margin:0 10px;
                    color: #fff;
                }
                .plus-user{
                    background-color: #000;
                    color: #e5d790;
                    margin-right: 10px;
                }
            }
        }
        //京东快报
        .info{
            width: 100%;
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid;
            div{
                display: flex;
                justify-content: space-between;
                padding: 5px;
                font-size: 12px;
                color: #999;
                p{
                    font-size: 14px;
                    color: #333;
                    font-weight: bold;
                }
            }
            >p{
                margin: 10px 10px;
                width: 150px;
                // border: solid;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                span{
                    background-color: rgba(255,37,27,.2);
                    color: #e1251b;
                    padding:4px;
                    margin-right: 5px;
                }
            }
        }
        //room小图标区域
        .room{
            display: flex;
            flex-flow: row wrap;
            height: 230px;
            div{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img{
                    width: 42px;
                }
            }
        }
    }
}

// 大框架container部分
//这个部分有两个粘性定位
.container{
    background-color: #e3e4e9;
    width: 1190px;
    height: calc(4162px);
    margin: 0 auto;
    margin-top: 20px;
    &::after{
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
    }
    >div{
        background-color: #fff;
        width: 1190px;
    }
    // 粘性定位搜索区
 .sticky-search{
     display: none;
     z-index: 9;
    position: sticky;
    top: -1px;
    box-sizing: content-box;
   display: flex;
   background-color: #fff;
   height: 54px;
//    强行撑开盒子，并将横向滚动条取消,body的x轴超出部分隐藏
        // padding-left: 1000px;
        // padding-right: 1000px;
        // margin-left: -1000px;
   border-bottom: 2px solid red;
   .sticky{
       background-color: #fff;
       width: 1190px;
       margin: auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       .logo{
        width: 125px;
        height: 40px;
        background-image: url(../img/logo京东.png);
        background-repeat: no-repeat;
        background-size: 190px 160px;
        background-position: 0px -120px;
       }
       .search-2{
           display: flex;
           width: 488px;
           border: red 2px solid;
           input{
               width: 488px;
               height: 32px;
               outline: none;
               padding: 2px 44px 2px 17px;
               position: relative;
           }
           .cream{
               width: 32px;
               height: 32px;
               line-height: 32px;
           }
           .zoom{
               width: 58px;
               height: 32px;
               line-height: 32px;
               background-color: red;
               text-align: center;
               color: #fff;
           }
       }
       .shopcar{
           margin: auto 0;
           margin-right: 80px;
           width: 132px;
           height: 36px;
           line-height: 36px;
           text-align: center;
           color: red;
           position: relative;
           border: 1px solid red;
           &::before{
               content: ""
               ;
               width: 16px;
               height: 16px;
               border: solid;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               position: absolute;
           }
       }
   }
}
    //粘性定位锚点区
.fix-nav{
    position: sticky;
    z-index: 4;
    margin-left: 116px;
    top: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: #e3e4e9;
    background-color: transparent;
    //因为设置了背景色，虽然透明但还是覆盖了下层的鼠标事件，所以要取消这层的鼠标事件
    pointer-events: none;
    div{
        width: 58px;
        background-color: #fff;
        height: 60px;
        padding: 0 5px 0 5px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: solid 1px #ccc;
        &:last-child{
            border-bottom: none;
        }
        a{
            letter-spacing: 6px;
            font-size: 14px;
            line-height: 24px;
            color: #000;
            pointer-events: all;//a标签的鼠标事件还是要显示的，实现锚点定位
            &:hover{
                color: red;
            }
        }
        
    }
}
    //京东秒杀区
    .sale{
        margin-top: -300px;
        display: flex;
        height: 260px;
        .sale-time{
            width: 190px;
            height: 260px;
            display: flex;
            flex-direction: column;
            background-image: url(../img/sale-time.png);
            >div{
                margin: auto;
                color: #fff;
            }
            .top{
                font-size: 30px;
                font-weight: 700;
                margin-top: 30px;
            }
            .middle{
                margin: 0 auto;
                font-size: 12px;
                span{
                    font-size: 14px;
                    font-weight: 700;
                }
            }
            .bottom{
                margin: 10px auto 20px;
                display: flex;
                height: 30px;
                line-height: 30px;
                font-size: 20px;
                span{
                    height: 30px;
                    width: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin:auto 5px;
                    background-color: #000;
                    font-size: 20px;
                }
            }
        }
        .sale-goods{
            flex-basis: 800px;
            height: 260px;
            display: flex;
            position: relative;
            >div{
                flex-basis: 200px;
                .sale-goods-p{
                    height: 180px;
                    flex: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: 140px;
                        height: 140px;
                    }
                }
                .title{
                    width: 160px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-align: center;
                    height: 12px;
                    line-height: 12px;
                    font-size: 12px;
                    margin: 15px auto;
                }
                .price{
                    color: red;
                    text-align: center;
                    height: 12px;
                    line-height: 12px;
                    font-weight: 700;
                    font-size: 12px;
                }
            }  
            // 上一张
            .prev{
                position: absolute;
                width: 25px;
                height: 35px;
                border-radius: 0 17.5px 17.5px 0;
                background-color: #ffffffcc;
                opacity: .5;
                top: 50%;
                transform: translateY(-50%);
                .l-arrow{
                    border: 10px solid transparent;
                    border-right: 10px solid #333;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: -5px;
                }
            }
            // 上一张
            .next{
                position: absolute;
                width: 25px;
                height: 35px;
                border-radius: 17.5px 0 0 17.5px;
                background-color: #ffffffcc;
                opacity: .5;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                .r-arrow{
                    border: 10px solid transparent;
                    border-left: 10px solid #333;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: -5px;
                }
            }
        }
        .sale-carousel{
            width: 200px;
            height: 260px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .sale-picture{
                overflow: hidden;
                width: 180px;
                height: 240px;
                justify-content: center;
                align-items: center;
                div{
                    width: 360px;
                    display: flex;
                    img{
                        width: 180px;
                        // height: 130px;
                    }
                }   
            }
            .sale-p-bottom{
                position: absolute;
                bottom: 40px;
                width: 82px;
                height: 24px;
                line-height: 24px;
                border-radius: 20px;
                color: red;
            }
            .sale-radio{
                position: absolute;
                bottom: 5px;
            }
        }
    }
    //特色优选区
    //分3行
    .prefer{
        background-color: #e3e4e9;
        width: 1190px;
        // 第一行
        .prefer-firstline{
        background-color: #e3e4e9;
        margin-top: 20px;
        display: flex;
            //第一行每日特价区
            .prefer-day{
                background-color: #fff;
                margin-right: 10px;
                width: 590px;
                display: flex;
                flex-direction: column;
                // 表头
                .day-title{
                    flex-basis: 60px;
                    display: flex;
                    align-items: center;
                    div:first-child{
                        font-size: 24px;
                        flex: auto;
                        // @include liebiao();
                        // &:hover{
                        //     @include liebiao2();
                        // }
                        @include icon();
                    }
                    div+div{
                        font-size: 14px;
                        margin-right: 20px;
                        padding: 0 0 2px;
                        color: #999;
                        &:hover{
                            color: red;
                            text-decoration: underline;
                        }
                    }
                }
                // 商品图片
                .day-goods{
                    flex: auto;
                    display: flex;
                    padding: 0 15px 15px 15px;
                    .goods-left{
                        float: left;
                        width: 170px;
                        height: 265px;
                        margin-right: 6px;
                        background-color: #6d7e920d;
                        >div{
                            width: 120px;
                            height: 120px;
                            margin: 10px auto;
                            img{
                                height: 120px;
                                width: 120px;
                            }
                        }
                        p{
                            text-align: center;
                            font-size: 14px;
                        }
                        p:last-child{
                            color: red;
                            font-size: 18px;
                        }
                        &::before{
                            content: "308天最低价";
                            width: 90px;
                            height: 24px;
                            font-size: 12px;
                            font-weight: 400;
                            color: #fff;
                            padding: 5px 10px;
                            background-color: #e5d790;
                        }
                    }
                    .goods-right{
                        width: 378px;
                        float: right;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        place-content: center center;
                        >div{
                            width: 146px;
                            height: 74px;
                            margin: 20px;
                            .g-r-p{
                                width: 74px;
                                height: 74px;
                                float: left;
                                position: relative;
                                img{
                                    width: 74px;
                                    height: 74px;
                                }
                                div{
                                    position: absolute;
                                    bottom: 0;
                                    height: 16px;
                                    width: 100%;
                                    font-size: 12px;
                                    color: #fff;
                                    text-align: center;
                                    background-color: rgba($color: #000000, $alpha: .5);
                                }
                            }
                            p{
                                font-size: 12px;
                                padding: 0 5px;
                            }
                            .price{
                                margin-top: 20px;
                                font-size: 14px;
                                color: red;
                            }
                        }
                    }
                }
            }
            //第一行品牌闪购区
            .prefer-brand{
                width: 590px;
                height: 344px;
                background-color: #fff;
                display: flex;
                .brand-left{
                    .title{
                        height: 60px;
                        font-size: 24px;
                        font-weight: 700;
                        line-height: 60px;
                        padding-left: 20px;
                        @include icon();
                    }
                    .left-picture{
                        width: 230px;
                        height: 235px;
                        img{
                        width: 230px;
                        height: 235px;
                        }
                    }
                }
                .brand-right{
                    display: flex;
                    flex-flow: row wrap;
                    align-content: space-around;
                    width: 100%;
                    >div{
                        height: 60px;
                        p{
                            text-align: center;
                        }
                        >div{
                            margin: auto;
                            width: 80px;
                            height: 40px;
                            img{
                                width: 80px;
                                height: 40px;
                                opacity: .5;
                                filter: invert(100%);
                                // filter: contrast(200%);
                            }
                        }  
                    }
                    div:nth-child(2n+1){
                        border-right: 1px solid;
                    }
                }
            }
        }
        //第二行
        .prefer-find{
            display: flex;
            margin-top: 20px;
            //发现好货
            .find-left{
                width: 190px;
                height: 260px;
                background-color: #fff;
                position: relative;
                div{
                    position: absolute;
                    top: 15px;
                    width: 160px;
                    height: 86px;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: rgba($color: #000000, $alpha: .4);
                    border-radius: 0 0 50px 0;
                    p{
                        padding: 5px 10px;
                        font-size: 30px;
                        color: #fff;
                    }
                    p:last-child{
                        padding: 10px;
                        font-size: 15px;
                        @include icon();
                    }
                }
            }
            //自动轮播图
            .find-right{
                height: 260px;
                margin-left: 10px;
                width: 990px;
                background-color: #fff;
                display: flex;
                align-items: center;
                overflow: hidden;
                .find-carousel{
                    background-color: #fff;
                    display: flex;
                    align-items: center;
                    animation: move 15s linear infinite;
                    &:hover{
                        animation-play-state: paused;
                    }
                    .exam{
                        display: flex;
                        flex-direction: column;
                        p{
                            font-size: 14px;
                            margin-top: 10px;
                            width: 150px;
                            height: 18px;
                            text-align: center;
                            // border: solid;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .exam-p{
                            width: 150px;
                            height: 150px;
                            img{
                                width: 150px;
                                height: 150px; 
                            }
                        }
                    }
                    .exam:nth-child(2n+2){
                        display: flex;
                        flex-direction: column;
                        p{
                            font-size: 14px;
                            margin-bottom: 10px;
                            width: 150px;
                            height: 18px;
                            text-align: center;
                            // border: solid;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            order: -1;
                        }
                        .exam-p{
                            width: 150px;
                            height: 150px;
                            img{
                                width: 150px;
                                height: 150px; 
                            }
                        }
                    }
                    @keyframes move {
                        0%{
                            transform: translateX(0px);
                        }
                        100%{
                            transform: translateX(-1200px);
                        }
                    }
                }
            }
        }
        //第三行
        .prefer-ticket{
            margin-top: 20px;
            background-color: #e3e4e9;
            width: 1190px;
            display: flex;
            height: 340px;
            justify-content: space-between;
            // 公共样式
            >div{
                width: 290px;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                .ticket-title{
                    font-size: 24px;
                    height: 60px;
                    line-height: 60px;
                    padding-left: 20px;
                    @include icon();
                    font-weight: 700;
                    background-color: #fff;
                }
                .ticket-content{
                    width: 290px;
                    height: 280px;
                }
            }
            .first{
                overflow: hidden;
                .ticket-content{
                    position: relative;
                    //主轮播图控制器
                .control{
                    // 上一张
                    .prev{
                        position: absolute;
                        width: 25px;
                        height: 35px;
                        border-radius: 0 17.5px 17.5px 0;
                        background-color: #ffffffcc;
                        opacity: .5;
                        top: 50%;
                        transform: translateY(-50%);
                        .l-arrow{
                            border: 10px solid transparent;
                            border-right: 10px solid #333;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            left: -5px;
                        }
                    }
                    // 上一张
                    .next{
                        position: absolute;
                        width: 25px;
                        height: 35px;
                        border-radius: 17.5px 0 0 17.5px;
                        background-color: #ffffffcc;
                        opacity: .5;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        .r-arrow{
                            border: 10px solid transparent;
                            border-left: 10px solid #333;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: -5px;
                        }
                    }
                    }
                    .exam{
                        margin-top: 10px;
                        margin-left: -55px;
                        display: flex;
                        align-items: center;
                        .ticket-exam{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            width: 130px;
                            height: 243px;
                            transform: scale(.8);
                            &:nth-child(2){
                                transform: scale(1);
                            }
                            .exam-p{
                                width: 130px;
                                height: 130px;
                                img{
                                    width: 130px;
                                    height: 130px;
                                }
                            }
                            p{
                                width: 130px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                margin-top: 10px;
                                text-indent: 1rem;
                            }
                            .more{
                                font-size: 12px;
                                color: #999;
                            }
                            .price{
                                color: red;
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
            .second{
                .ticket-top{
                    display: flex;
                    justify-content: space-evenly;
                    >div{
                        width: 62px;
                        height: 20px;
                        margin: 0 4px;
                        font-size: 12px;
                        border-radius: 12px;
                        color: #999;
                        text-align: center;
                        line-height: 20px;
                        &:first-child{
                            background-color: red;
                            color: #f6f6f6;
                        }
                        &:hover{
                            background-color: red;
                            color: #fff;
                        }
                    }
                }
                .goods{
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    .left-p{
                        height: 70px;
                        width: 70px;
                        img{
                            height: 70px;
                            height: 70px;
                        }
                    }
                    .right-word{
                        width: 150px;
                        p:first-child{
                            // 多行文本溢出
                            font-size: 14px;
                            overflow : hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        p:nth-child(2){
                            margin-top: 10px;
                            color: red;
                        }
                    }
                }
            }
            .third{
                .ticket-content{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    padding: 0 10px;
                    >div{
                        margin-bottom: 10px;
                        height: 118px;
                        display: flex;
                        align-items: center;
                        .shop-p{
                            width: 85px;
                            height: 85px;
                            background-color: #fff;
                            padding: 5px;
                            margin-right: 5px;
                            img{
                                width: 75px;
                                height: 75px;
                            }
                        }
                        .shop-word{
                            width: 200px;
                            height: 113px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            align-items: center;
                            p:first-child{
                                font-size: 14px;
                                width: 120px;
                                line-height: 14px;
                            }
                            span{
                                font-size: 12px;
                                height: 14px;
                                line-height: 14px;
                                margin-left: -90px;
                                border: 1px solid red;
                                color: red;
                                padding: 2px;
                                box-sizing: content-box;
                            }
                            p:last-child{
                                width: 120px;
                                color: #999;
                            }
                        }

                    }
                    .shop-1{
                        background-color: pink;
                    }
                    .shop-2{
                        background-color: greenyellow;
                    }
                }
            }
            .fourth{
                background: url(../img/prefer-fourth.png) no-repeat bottom;
                background-color: #fff;
                background-size: 280px;
                .ticket-content{
                    .fourth-content{
                        width: 260px;
                        height: 280px;
                        margin: auto;
                        //样式
                        >div{
                            width: 260px;
                            height: 82px;
                            .fourth-picture{
                                float: left;
                                width: 66px;
                                height: 66px;
                                border-radius: 50%;
                                margin: 8px 0 0 7px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: #fff;
                                img{
                                    width: 50px;
                                    height: 50px;
                                }
                            }
                            //添加伪元素设置三角形
                            .more-ticket{
                                top: 50%;
                                transform: translateY(-50%);
                                float: right;
                                position: relative;
                                writing-mode: vertical-lr;
                                margin-right: 14px;
                                width: 30px;
                                &:after{
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    right: -10px;
                                    transform: translateY(-50%);
                                    border: 10px solid transparent;
                                    border-left: #333 solid 10px;
                                }
                            }
                            .word{
                                position: relative;
                                top: 50%;
                                transform: translateY(-50%);
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                width: 140px;
                                height: 90%;
                                p{
                                    width: 100px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    color: red;
                                    span{
                                        font-size: 28px;
                                        color: red;
                                        font-weight: 700;
                                    }
                                    &:nth-child(2){
                                        font-size: 12px;
                                        color: #999;
                                    }
                                    &:last-child{
                                        font-size: 12px;
                                        color: #333;
                                    }
                                }
                            }
                        }

                    }
                }
                
            }
        }
    }
    //频道广场
    .channel{
        margin-top: 20px;
        width: 1190px;
        background-color: #e3e4e9;
        //标题部分
        .channel-title{
            display: flex;
            justify-content: center;
            align-items: center;
            h3{
                text-align: center;
                font-size: 32px;
                line-height: 40px;
                display: flex;
                margin-bottom: 20px;
                &::before{
                    content: "";
                    width: 50px;
                    height: 40px;
                    display: inline-block;
                    background: url(../img/channel-title.png);
                }
                &::after{
                    content: "";
                    width: 50px;
                    height: 40px;
                    display: inline-block;
                    background: url(../img/channel-title.png) -50px;
                }
            }
        }
        .channel-outline{
            display: flex;
            flex-direction: column;
            width: 1190px;
            height: 940px;
            justify-content: space-between;
            >div>div{
                background-color: #fff;
            }
            // 频道大纲第一行样式
            .c-outline-row1{
                display: flex;
                justify-content: space-between;
                height: 370px;
                >div{
                    width: 290px;
                    img{
                        width: inherit;
                        height: inherit;
                    }
                }
                //第一行后两列样式
                .row1-col-3{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: #e3e4e9;
                    // 第一行后两列中的div样式
                    >div{
                        width: 290px;
                        height: 180px;
                        background-color: #fff;
                        p{
                            margin-top: 20px;
                            margin-left: 20px;
                            color: #999;
                            font-size: 14px;
                            span{
                                font-size: 22px;
                                color: #333;
                                font-weight: 700;
                            }
                        }
                        .picture{
                            margin-top: 20px;
                            margin-left: 20px;
                            width: 100px;
                            height: 100px;
                            display: inline-block;
                            img{
                                width: inherit;
                                width: inherit;
                            }
                        }
                    }
                }
            }
            // 频道大纲2-4行样式
            .c-outline-row2,.c-outline-row2 ~ div{
                display: flex;
                justify-content: space-between;
                height: 180px;
                >div{
                    width: 290px;
                    p{
                        margin-top: 20px;
                        margin-left: 20px;
                        color: #999;
                        font-size: 14px;
                        span{
                            font-size: 22px;
                            color: #333;
                            font-weight: 700;
                        }
                    }
                    .picture{
                        margin-top: 20px;
                        margin-left: 20px;
                        width: 100px;
                        height: 100px;
                        display: inline-block;
                        img{
                            width: inherit;
                            width: inherit;
                        }
                    }
                }
            }
        }
    }
    //推荐
    .recommend{
        margin-top: 20px;
        background-color: #e3e4e9;
        //标题文字样式
        .recommend-title{
            display: flex;
            justify-content: center;
            align-items: center;
            h3{
                text-align: center;
                font-size: 32px;
                line-height: 40px;
                display: flex;
                margin-bottom: 20px;
                &::before{
                    content: "";
                    width: 50px;
                    height: 40px;
                    display: inline-block;
                    background: url(../img/channel-title.png);
                }
                &::after{
                    content: "";
                    width: 50px;
                    height: 40px;
                    display: inline-block;
                    background: url(../img/channel-title.png) -50px;
                }
            }
        }
        //区块样式
        .recommend-area{
            position: sticky;
            z-index: 9;
            top: 50px;
            box-shadow: 0px 4px 10px 0px #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
            background-color: #fff;
            margin-bottom: 10px;
            // 公共样式
            >div{
                height: 48px;
                width: 180px;
                position: relative;
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 12px;
                    height: 24px;
                    width: 1px;
                    background-color: #ccc;
                }
                p:first-child{
                    text-align: center;
                    margin: auto;
                    height: 27px;
                    line-height: 27px;
                    font-size: 16px;
                    color: #333;
                }
                p:last-child{
                    text-align: center;
                    height: 21px;
                    line-height: 21px;
                    font-size: 14px;
                    color: #999;
                }
            }
            // 清除最后一个div的伪元素样式
            div:last-child{
                &::before{
                    background-color: #fff;
                }
            }
            // 区别样式
            .recommend-area-col1{
                .recommend-area-1{
                    background-color: red;
                    width: 80px;
                    color: #fff;
                    border-radius: 20px;
                    font-weight: 700;
                }
                .recommend-area-2{
                    color: red;
                }
            }
        }
        // recommend-outline样式,商品描述
        .recommend-goods{
            display: flex;
            flex-direction: column;
            background-color: #e3e4e9;
            .recommend-row{
                display: flex;
                justify-content: space-between;
                .recommend-col{
                    position: relative;
                    width: 230px;
                    height: 322px;
                    margin-bottom: 10px;
                    background-color: #fff;
                    .mask{
                        display: none;
                    }
                    //鼠标悬停的遮罩层效果
                    &:hover{
                        .mask{
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            background-color: rgba($color: #000000, $alpha: .2);
                            &::before{
                                position: absolute;
                                content: "x";
                                top: 10px;
                                right: 10px;
                            }
                            &::after{
                                position: absolute;
                                content: "找相似";
                                width: 80px;
                                height: 24px;
                                background-color: #000;
                                border-radius: 20px;
                                text-align: center;
                                line-height: 24px;
                                top: 75%;
                                left: 50%;
                                transform: translateX(-50%);
                                color: #fff;

                            }
                        }
                    }
                    .re-picture{
                        width: 150px;
                        height: 150px;
                        margin: 40px auto;
                        img{
                            width: inherit;
                            height: inherit;
                        }
                    }
                    //设置多行文本溢出
                    .describe{
                        width: 190px;
                        margin: auto;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .price{
                        margin-top: 10px;
                        font-size: 16px;
                        margin-left: 20px;
                        color: red;
                    }
                }
            }
        }
    }
}
//售后区
.after{
    border-bottom: solid 2px #ccc; 
    >div{
        width: 1190px;
        height: 103px;
        margin: auto;
        display: flex;
        align-items: center;
        >div{
            margin: auto;
            width: 297px;
            height: 42px;
            padding-left: 90px;
            font-size: 18px;
            font-weight: 900;
            line-height: 42px;
            position: relative;
            &::before{
                content: "";
                width: 36px;
                height: 42px;
                display: inline-block;
                // border: solid 1px;
                left: 45px;
                position: absolute;
            }
        }
        .duo{
            &::before{
                background: url(../img/精灵图/精灵图文字.png);
                opacity: .5;
            }
        }
        .kuai{
            &::before{
                background: url(../img/精灵图/精灵图文字.png) 74px 0;
                opacity: .5;
            }
        }
        .hao{
            &::before{
                background: url(../img/精灵图/精灵图文字.png) 149px 0;
                opacity: .5;
            }
        }
        .sheng{
            &::before{
                background: url(../img/精灵图/精灵图文字.png)  0 42px;
                opacity: .5;
            }
        }
    }
}
//页尾
.last{
    width: 1190px;
    height: 200px;
    margin: 20px auto;
    display: flex;
    border-bottom: 2px solid #ccc;
    >ul{
        width: 198px;
        // border: solid 1px;
        li:first-child{
            font-size: 14px;
            font-weight: 700;
        }
        li+li{
            font-size: 12px;
        }
        li{
            margin: 10px 20px;
        }
        p{
            margin: 0 20px;
            font-size: 14px;
            font-weight: 700;
        }
    }
}
//友情链接，版权号区
.link{
    width: 1190px;
    margin: auto;
    >div{
        ul{
            text-align: center;
            font-size: 0px;
            li{
                padding: 0 10px;
                font-size: 12px;
                color: #888;
                display: inline-block;
                border-right: solid 1px #888;
                &:last-child{
                    border-right: none;
                }
            }
        }
    }
    .link-row5{
        ul{
            .shijie{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 39% 60%;
                }
            }
            .deguo{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 57% 58%;
                }
            }
            .yuenan{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 76% 58%;
                }
            }
            .chaoxian{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 93% 58%;
                }
            }
            .meiguo{
                position: relative;
                padding-left:20px;
                &::before{
                    content: "";
                    width: 15px;
                    height: 12px;
                    position: absolute;
                    border: solid 1px;
                    left: 0;
                    background: url(../img/精灵图/精灵图文字.png) no-repeat;
                    background-position: 39% 77%;
                }
            }
        }
    }
    .link-last{
        display: flex;
        justify-content: center;
        div{
            width: 103px;
            height: 32px;
            margin: 40px 2px;
        }
        .kexin{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 0;
        }
        .jingcha{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 25%;
        }
        .chenxin{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 25%;
        }
        .youhai{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 50%;
        }
        .jubao{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 50%;
        }
        .saohuan{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 0 73%;
        }
        .zhangai{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 73%;
        }
        .chanquan{
            background: url(../img/精灵图/精灵图logo.png) no-repeat 90% 99%;
        }
    }
}



 

